import React from 'react'
import { Label } from './ui/label'
import { Button } from './ui/button'
import { Textarea } from './ui/textarea'
import { ArrowUpIcon, ChevronRightIcon, CheckCircledIcon, CrossCircledIcon } from '@radix-ui/react-icons'
import { Separator } from './ui/separator'
import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from "@/components/ui/accordion"

interface Props {
    sn: string,
    url: string,
    upgradeClicked?: (sn: string) => void,
    success?: boolean,
    message?: string,
    code?: number,
    result?: string,
    extraResult?: string,
    timeStamp?: number
}

function DeviceUpgrade(props: Props) {
    return (
        <Accordion type='multiple' className='w-full'>
            <AccordionItem value={props.sn}>
                <AccordionTrigger className='hover:no-underline'>
                    <div key={props.sn} className='flex flex-row justify-between items-center px-4 py-2 '>
                        <Label className='flex-row flex items-center'>
                            {
                                props.success !== undefined && (props.success ?
                                    <CheckCircledIcon className="mr-2 h-4 w-4 text-green-500" />
                                    : <CrossCircledIcon className="mr-2 h-4 w-4 text-red-500" />)
                            }
                            设备序列号：{props.sn}
                        </Label>
                        <Button
                            variant='secondary'
                            className='ml-4'
                            size='sm'
                            onClick={(e) => {
                                e.stopPropagation()
                                props.upgradeClicked?.(props.sn)
                            }}>
                            <ArrowUpIcon className="h-4 w-4" />  升级
                        </Button>
                    </div>
                </AccordionTrigger>
                <AccordionContent>
                    <div className='px-4 py-2 flex flex-col'>
                        <div className='flex flex-col gap-y-1 mt-2'>
                            <Label className='text-sm text-gray-500'>升级链接</Label>
                            <Textarea rows={4} className='' onClick={(e) => { e.stopPropagation() }} value={props.url} readOnly />
                        </div>
                        <Label className='text-sm text-gray-500 mt-4 mb-1'>升级结果</Label>
                        <div className='flex flex-col rounded border p-2'>
                            <div className='flex flex-col gap-y-1'>
                                <Label className='text-sm text-gray-500'>code</Label>
                                <Label className=''>{props.code ?? "无"}</Label>
                            </div>
                            <div className='flex flex-col gap-y-1'>
                                <Label className='text-sm text-gray-500'>message</Label>
                                <Label className=''>{props.message ?? "无"}</Label>
                            </div>

                            <div className='flex flex-col gap-y-1 mt-2'>
                                <Label className='text-sm text-gray-500'>result</Label>
                                <Label className=''>{props.result ?? "无"}</Label>
                            </div>
                        </div>
                    </div>
                </AccordionContent>
            </AccordionItem>
        </Accordion>)
}


export default DeviceUpgrade

